{include file="common/header-top" /}

<link rel="stylesheet" href="/__FRONT__/css/job-index.css?_2019">


<div id='app' v-cloak>

    <van-nav-bar title="找兼职" left-arrow @click-left="goBack" left-text="返回">
    </van-nav-bar>



            <!--兼职类型-->
            <van-row style="margin-top: 10px;">
                <van-grid :column-num="6" square :border="false">
                    <van-grid-item
                            v-for="item in jobsType"
                            :icon="item.img"
                            :text="item.name"
                            @click="confirmSelectJobType(item.name, item.id)"
                    />
                </van-grid>
            </van-row>
            <!--兼职类型-->

            <!--筛选-->
            <van-row id="selectDiv" style="margin-top: 3%;">
                <van-tabs @click="clickSelect" title-active-color="#7d7e80" title-inactive-color="#7d7e80" line-height="0px">
                    <van-tab>
                        <div slot="title">
                            {{selectItems.jobType}}<van-icon name="arrow-down" />
                        </div>
                    </van-tab>
                    <van-tab>
                        <div slot="title">
                            {{selectItems.area}}<van-icon name="arrow-down" />
                        </div>
                    </van-tab>
                    <van-tab>
                        <div slot="title">
                            {{selectItems.settlement}}<van-icon name="arrow-down" />
                        </div>
                    </van-tab>
                    <van-tab>
                        <div slot="title">
                            <van-icon name="filter-o" />筛选
                        </div>
                    </van-tab>
                </van-tabs>
            </van-row>
            <!--筛选-->


            <!--岗位列表-->
            <van-list
                    v-model="listJobLoading"
                    :finished="listJobFinished"
                    finished-text="没有更多了"
                    @load="getAllListJob"
            >

                <van-row v-for="item in listJob" class="job-item">
                    <a :href="'/index/Jobs/jobDetail?id=' + item.id" class="job-item-a">
                        <van-col span="5">
                            <van-icon :name="item.jobTypeImg" class="job-item-img-icon" size="45px"></van-icon>
                        </van-col>

                        <van-col span="11">
                            <h4 class="job-item-title">
                                <div class="van-ellipsis">{{item.title}}</div>
                            </h4>
                            <van-cell
                                icon="/__FRONT__/images/icon/publish-job-address.png"
                                :title="item.address"
                            >
                            </van-cell>
                            <van-cell
                                icon="/__FRONT__/images/icon/publish-job-time.png"
                                :title="item.work_timeCh"
                            ></van-cell>
                            <van-cell
                                icon="/__FRONT__/images/icon/publish-job-money.png"
                            >
                                <span class="job-item-span" slot="title">
                                    <span class="money-font">{{item.settlement_typeCh}}</span>
                                </span>
                            </van-cell>

                        </van-col>

                        <van-col span="8">
                            <van-tag round type="warning" style="float:right;margin-top: 5px;" v-if="item.is_top">置顶</van-tag>
                            <van-tag round style="float:right;margin-top: 5px;" v-if="item.isOver">已结束</van-tag>
                            <div class="van-ellipsis job-item-money-div">
                                <span class="money-font job-item-money-font">{{item.salary}}</span>
                                <span class="job-item-span-unit">{{item.salary_unitCh}}</span>
                            </div>
                        </van-col>
                    </a>
                </van-row>


            </van-list>

            <!--岗位列表-->

        <!--全部兼职-->




    {include file="common/foot-bar" /}



    <!--筛选popup-->
    <van-popup
        v-model="showScreenPop"
        position="top"
    >
        <van-row>
            <van-tabs v-model="whichSelectTab">
                <!--岗位筛选 start -->
                <van-tab>
                    <div slot="title">
                        {{selectItems.jobType}}<van-icon name="arrow-down" />
                    </div>
                    <van-picker
                        show-toolbar
                        :default-index="{$jobTypeInfo.id|default=0}"
                        :columns="selectJobTypeList"
                        @cancel="showScreenPop = false"
                        @confirm="confirmSelectJobType"
                    />
                </van-tab>
                <!--岗位筛选 end -->

                <!--地区筛选 start -->
                <van-tab>
                    <div slot="title">
                        {{selectItems.area}}<van-icon name="arrow-down" />
                    </div>
                    <van-area
                            :area-list="selectJobAreaList"
                            @cancel="showScreenPop = false"
                            @confirm="selectJobArea"
                            :columns-placeholder="['请选择', '请选择', '不限区域']"
                    ></van-area>
                </van-tab>
                <!--地区筛选 end -->

                <!--结算筛选 start-->
                <van-tab>
                    <div slot="title">
                        {{selectItems.settlement}}<van-icon name="arrow-down" />
                    </div>
                    <van-picker
                            show-toolbar
                            :columns="selectJobSettlementList"
                            @cancel="showScreenPop = false"
                            @confirm="confirmSelectSettlement"
                    />
                </van-tab>
                <!--结算筛选 end-->
                <!--综合筛选 start-->
                <van-tab>
                    <div slot="title">
                        <van-icon name="filter-o" />筛选
                    </div>
                    <van-row>
                        <van-cell>结算方式</van-cell>
                        <van-grid :column-num="5">
                            <van-grid-item @click="clickSelectAll('settlement', item)" v-for="item in selectJobSettlementList">
                                <van-tag plain mark :color="item.style">{{item.text}}</van-tag>
                            </van-grid-item>
                        </van-grid>
                    </van-row>
                    <van-row>
                        <van-cell>性别要求</van-cell>
                        <van-grid :column-num="5">
                            <van-grid-item @click="clickSelectAll('gender', item)" v-for="item in selectGenderList">
                                <van-tag plain mark :color="item.style">{{item.text}}</van-tag>
                            </van-grid-item>
                        </van-grid>
                    </van-row>
                    <van-row>
                        <van-cell>
                            <van-col span="12">
                                <van-button type="primary" size="small" @click="showScreenPop = false">取消</van-button>
                            </van-col>
                            <van-col span="12">
                                <van-button type="primary" size="small" style="float: right;" @click="confirmSelectAll">确定</van-button>
                            </van-col>
                        </van-cell>
                    </van-row>
                </van-tab>
                <!--综合筛选 end-->
            </van-tabs>
        </van-row>



    </van-popup>
    <!--筛选popup-->

</div>

<script src="/__FRONT__/plugs/wechatJsSDK/jweixin-1.4.0.js"></script>
<script>
    var vm = new Vue({
        el: '#app',
        data() {
            return {
                active:1,
                userCenterIcon: {
                    normal: '/__FRONT__/images/icon/usercenter-n.png',
                    active: '/__FRONT__/images/icon/usercenter-a.png'
                },
                erShouIcon: {
                    normal: '/__FRONT__/images/icon/ershou-n.png',
                    active: '/__FRONT__/images/icon/ershou-a.png'
                },
                tabActive:0,

                inWechat: {$inWechat},


                jobsType:[],
                /**
                 * 筛选开始
                 */
                whichSelectTab:0,
                selectItems:{
                    jobType:"{$jobTypeInfo.name|default='兼职类型'}",
                    jobTypeValue: '{$jobTypeInfo.id|default=0}',
                    area:"地区",
                    areaValue: '',
                    settlement:"结算",
                    settlementValue:0,
                    genderValue: '',
                    tabValue: '',
                },
                selectAllItems:{
                    jobTypeValue: '{$jobTypeInfo.id|default=0}',
                    areaValue: '',
                    settlementValue:0,
                    genderValue: '',
                    tagValue: '',
                },
                selectJobTypeList:[],
                selectJobAreaList: {},
                selectJobSettlementList:[],
                selectGenderList:[],
                showScreenPop:false,

                //全部兼职列表集
                listJob: [],
                listJobPage: 1,
                listJobPageSize: 8,
                listJobLoading: false,
                listJobFinished: false,




            };
        },
        created(){

            if (this.inWechat) {
                this.getWechatLocation();
            }

            //获取兼职类型列表
            axiosRequest.get('/api/job/jobType').then(function (response) {
                if (response.code == 200) {
                    response.data.forEach(function (item) {
                        item.style = '';
                    });
                    vm.$data.jobsType = response.data;
                } else {
                    vant.Notify({ type: 'danger', message: response.msg });
                }
            });

            //获取系统中开放的地区
            axiosRequest.get('/api/common/openArea').then(function (response) {
                if (response.code == 200) {
                    vm.$data.selectJobAreaList = response.data;
                }
            });

            //获取兼职结算类型/男女性别
            axiosRequest.get('/api/job/indexCommon').then(function (response) {
                if (response.code == 200) {
                    response.data.settlementList.forEach(function(item){
                        item.style = '';
                    });
                    vm.$data.selectJobSettlementList = response.data.settlementList;
                    response.data.genderList.forEach(function(item, index){
                        vm.$data.selectGenderList.push({
                            text: item,
                            index: index,
                            style: ''
                        });
                    });
                } else {
                    vant.Notify({ type: 'danger', message: response.msg });
                }
            });



        },

        computed:{

        },

        methods:{
            //返回上一页
            goBack(){
                history.back();
            },
            clickSelect(name, title){
                this.whichSelectTab = name;
                switch (name) {
                    case 0:
                        this.selectJobType();
                        break;
                    case 1:
                        break;
                    case 2:
                        break;
                    case 3:
                        break;
                    default:
                        break;
                }
                this.showScreenPop = true;
            },
            //岗位选择
            selectJobType(){
                if (!this.selectJobTypeList.length) {
                    this.selectJobTypeList = ['全部岗位'];
                    this.jobsType.forEach(function (item) {
                        vm.$data.selectJobTypeList.push(item.name);
                    });
                }
            },
            confirmSelectJobType(value, index){
                if (index != this.selectItems.jobTypeValue) {
                    this.selectItems.jobType = value;
                    this.selectItems.jobTypeValue = index;
                    //重新填充数据
                    this.clearAllListJob();
                    this.getAllListJob();
                }
                this.showScreenPop = false;
                return false;
            },
            //地区选择
            selectJobArea(item){
                this.selectItems.areaValue = '';
                item.forEach(function(one){
                    if (one.code) {
                        vm.$data.selectItems.areaValue += one.name + '|';
                        vm.$data.selectItems.area = one.name;
                    }
                });

                this.clearAllListJob();
                this.getAllListJob();

                this.showScreenPop = false;
            },
            //结算方式选择
            confirmSelectSettlement(value){
                if (this.selectItems.settlementValue != value.index) {
                    this.selectItems.settlement = value.text;
                    this.selectItems.settlementValue = value.index;

                    this.clearAllListJob();
                    this.getAllListJob();
                }
                this.showScreenPop = false;
                return false;
            },

            //综合筛选 -- 地区
            clickSelectAll(type, item){
                switch (type){
                    case 'settlement':
                        this.selectAllItems.settlementValue = item.index;
                        this.selectJobSettlementList.forEach(function (one) {
                            one.style = '';
                        });
                        item.style = '#2aa245';
                        break;
                    case 'gender':
                        this.selectAllItems.genderValue = item.index;
                        this.selectGenderList.forEach(function (one) {
                            one.style = '';
                        });
                        item.style = '#2aa245';
                        break;
                }
            },
            //确定综合选择区
            confirmSelectAll(){
                this.selectItems.settlementValue = this.selectAllItems.settlementValue;
                this.selectItems.areaValue = this.selectAllItems.areaValue;
                this.selectItems.genderValue = this.selectAllItems.genderValue;
                this.selectItems.tabValue = this.selectAllItems.tagValue;
                this.clearAllListJob();
                this.getAllListJob();
                this.showScreenPop = false;
            },

            //清除兼职列表，重置分页
            clearAllListJob(){
                this.listJob = [];
                this.listJobPage = 1;
                this.listJobPageSize = 8;
                this.listJobLoading = true;
                this.listJobFinished = false;
            },

            //获取兼职列表
            getAllListJob() {
                var params = {
                    page: this.listJobPage,
                    pageSize: this.listJobPageSize,
                    jobType: this.selectItems.jobTypeValue,
                    areaValue: this.selectItems.areaValue,
                    settlementValue: this.selectItems.settlementValue,
                    tabValue: this.selectItems.tabValue,
                    gender: this.selectItems.genderValue
                };
                axiosRequest.get('/api/job/listJob',{params:params}).then(function (response) {
                    if (response.code == 200) {
                        if (response.data.jobList) {
                            response.data.jobList.forEach(function(item){
                                vm.$data.listJob.push(item)
                            });
                            vm.$data.listJobLoading = false;
                            vm.$data.listJobPage += 1;


                            if (response.data.jobList.length < vm.$data.listJobPageSize) {
                                vm.$data.listJobFinished = true;
                                vm.$data.listJobLoading = false;
                            }
                        } else {
                            vant.Toast('没有更多啦！');
                            vm.$data.listJobFinished = true;
                            vm.$data.listJobLoading = false;
                        }
                    } else {
                        vant.Toast('系统开小差啦！');
                    }
                });

            },


            getWechatLocation(){
                //微信js SDK 配置
                wx.config({
                    debug: false,
                    appId: '{$wechatJsSDK.appId|default=""}',
                    timestamp: '{$wechatJsSDK.timestamp|default=""}',
                    nonceStr: '{$wechatJsSDK.nonceStr|default=""}',
                    signature: '{$wechatJsSDK.signature|default=""}',
                    jsApiList: [
                        'getLocation',
                    ]
                });
                wx.ready(function () {
                    wx.getLocation({
                        type: 'wgs84',
                        success: function (res) {
                            var postData = {
                                latitude: res.latitude,
                                longitude: res.longitude
                            };
                            axiosRequest.post('/api/common/transLocation', postData).then(function (response) {
                                if (response.code == 200) {
                                    vm.$data.selectItems.areaValue = response.data.areaValue;
                                    vm.$data.selectItems.area = response.data.cityName;
                                    vm.clearAllListJob();
                                    vm.getAllListJob();
                                } else {
                                    vant.Notify({type:'danger', message:response.msg});
                                }
                            });
                        },
                        cancel: function (res) {
                            vant.Notify({ type: 'danger', message: '您拒绝授权获取地理位置!'});
                        }
                    });
                });
                //初始化jsapi接口 状态
                wx.error(function (res) {
                    vant.Notify({ type: 'danger', message: '当前客户端版本不支持微信SDK!'});
                });
            },



        },




    });




</script>







{include file="common/foot-bottom" /}
